import React from 'react';
import { Icon } from 'antd';
import { FormHeader } from '..';
import styles from './index.less';

const CollapseHeader = ({ title, children, style, matterStatus, defaultExpand = true, headerStyle = {} }) => {
    const [expand, setExpand] = React.useState(defaultExpand);

    return (
        <div className={styles.formHeaderBox} style={headerStyle}>
            <div className={styles.formHeaderBar}>
                <FormHeader title={title} matterStatus={matterStatus} />
                <a
                    className={styles.expandBox}
                    onClick={e => {
                        e.preventDefault();
                        setExpand(!expand);
                    }}
                >
                    {expand ? '收起' : '展开'}
                    <Icon type={expand ? 'caret-up' : 'caret-down'} style={{ marginLeft: 4 }} />
                </a>
            </div>
            <div style={{ display: expand ? 'block' : 'none', ...style }}>{children}</div>
        </div>
    );
};

export default CollapseHeader;
